<template>
  <div>
    <headers :head_title="head_title" />
    <main>
      <!-- 系统发送的消息详情 -->
      <div class="message_details">
        <div>
          <p>有新版本更新拉！</p>
          <div class="message_time">
            <span>2019年3月10日 17:21</span>
          </div>
        </div>
        <div>
          <p>发现您刚刚修改过登录免密码，请妥善保管您的新密码！</p>
          <div class="message_time">
            <span>2019年2月20日 10:17</span>
          </div>
        </div>

        <div>
          <p>感谢您注册维度账号，小维希望您使用我们的产品能够快乐！</p>
          <div class="message_time">
            <span>2019年2月18日 14:20</span>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import headers from '@/components/header.vue'
//head头部数据
const head_title = ref('我的消息')

</script>

<style scoped lang="scss">

* {
  margin: 0;
  padding: 0;
}
.head {
  height: 50px; // 100px * 0.5
  line-height: 75px; // 150px * 0.5
  display: flex;
  /* background: red; */
  color: #999;
  position: relative;
}

.message_title {
  color: black;
  position: absolute;
  left: 20%; // 40% * 0.5
  font-size: 17px; // 34px * 0.5
}

.line {
  height: 7.5px; // 15px * 0.5
  width: 100%;
  margin-top: 5px; // 10px * 0.5
}

.message_details > div {
  width: 95%; // 95% * 0.5
  margin: 20px 10px; // 40px和20px分别减半
  border: 0.5px solid #ccc; // 1px * 0.5
  border-radius: 7.5px; // 15px * 0.5
}

.message_details > div > p {
  margin: 10px; // 20px * 0.5
  font-size: 12px; // 24px * 0.5
}

.message_time {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px; // 20px * 0.5
  margin-right: 5px; // 10px * 0.5
  margin-bottom: 2.5px; // 5px * 0.5
  font-size: 10px; // 20px * 0.5
}
</style>

